<template>
  <div class="flex justify-end">
    <!-- 创建一个 Element UI 的按钮，绑定点击事件到 closeModal 方法，并使用 props.cancelButProps 传递额外属性 -->
    <el-button @click="closeModal" v-bind="props.cancelButProps">
      {{ props.cancelButText }}
    </el-button>
    <!-- 创建另一个 Element UI 的按钮，带有 loading 状态，类型为 primary，并绑定点击事件到 handleSubmit 方法 -->
    <el-button
      :loading="subLoading"
      type="primary"
      v-bind="props.confirmButProps"
      @click="handleSubmit"
      >{{ props.confirmButText }}
    </el-button>
  </div>
</template>

<script lang="ts" setup>
  // 从 vue 导入 inject 函数，用于从组件外部注入属性或方法
  import { inject } from 'vue';

  // 使用 defineProps 定义组件的 props，这些是组件的输入属性
  const props = defineProps({
    confirmButProps: {
      type: Object,
    },
    cancelButProps: {
      type: Object,
    },
    // 确认按钮文字
    confirmButText: {
      type: String,
      default: '确认',
    },
    // 取消按钮文字
    cancelButText: {
      type: String,
      default: '取消',
    },
  });

  // 使用 inject 从组件外部注入 handleSubmit、closeModal 和 subLoading
  const handleSubmit: any = inject('handleSubmit');
  const closeModal: any = inject('closeModal');
  const subLoading = inject('subLoading');
</script>
